import React, { Component } from 'react';
import "./CateList.scss"
import axios from 'axios'
import CateListCarousel from './CateListCarousel'
import { withRouter } from 'react-router-dom'

class CateList extends Component {
  state = {
    id: '1005000',
    leftList: [],
    rightList: [],
    CarouselList:[]
  }

  componentDidMount() {
    if (!this.props.location.search) {
      this.props.location.search = '?__timestamp=1598278747827&categoryId=11'
    }
    axios.get('item/cateList.json' + this.props.location.search).then(res => {
      this.setState({
        leftList: res.data.data.categoryL1List,
        rightList: res.data.data.categoryGroupList,
        id: Number(this.props.location.search.split('&')[1].split('=')[1]),
        CarouselList:res.data.data.currentCategory.bannerList
      })
    })
  }

  render() {
    const arr = [1598278747827, 1598279263675, 1598259440942, 1598259460558, 1598259472980, 1598259486404, 1598259499177, 1598259511479, 1598259523539, 1598278669785,]
    return (
      <div className="CateList_content">
        {/* 分类内容左边开始 */}
        <div className="CateList_content_left">
          <ul>

            {/* 循环li */}
            {
              this.state.leftList.map((v, i) => (
                <li className="CateList_content_left_item" key={v.id}
                  onClick={() => {
                    this.setState({
                      id: v.id
                    })
                    this.props.history.push('/cateList?__timestamp=' + arr[i] + '&categoryId=' + v.id)
                    axios.get('item/cateList.json?__timestamp=' + arr[i] + '&categoryId=' + v.id).then(res => {
                      this.setState({
                        rightList: res.data.data.categoryGroupList,
                        CarouselList:res.data.data.currentCategory.bannerList
                      })
                    })
                  }}>
                  <a className={
                    this.state.id === v.id ? "CateList_content_left_txt_CateListActive" : "CateList_content_left_txt"
                  } href={v.aaaa}>{v.name}</a>

                </li>
              ))
            }

          </ul>
        </div>
        {/* 分类内容左边结束 */}

        {/* 分类内容右边开始 */}
        <div className="CateList_content_right">
          {/* 轮播图开始 */}
          <CateListCarousel CarouselList={this.state.CarouselList}></CateListCarousel>
          {/* 轮播图结束 */}

          {/* 精选列表开始 */}
          {
            this.state.rightList.map(v => (
              <div className="rightListCon clearfix" key={v.id} >
                <div className="rightListTit">{v.name}</div>
                {
                  v.categoryList.map(val => (
                    <div className="rightListItem" key={val.id}  onClick={()=>{
                      this.props.history.push('/Search?__timestamp=1598528836839&keyword=' + val.name)
                    }}>
                      <img src={val.wapBannerUrl} alt="" />
                  <div className="rightListItemTit">{val.name}</div>
                    </div>
                  ))
                }
              </div>
            ))
          }
          {/* 精选列表结束 */}
        </div>
        {/* 分类内容右边结束 */}
      </div>
    );
  }
}

export default withRouter(CateList);
